<template>
    <div class="dataManagement">
        <div class="first_block">
            <el-row>
                <el-col :span="24">
                    <el-link type="primary" v-for="screen in screenData" :key="screen.id" @click="currentItem(screen)">{{screen.form.name}}</el-link>                    
                </el-col>                
            </el-row>
            <el-row>
                <formGroup :formList="formList" @addData="addData" ref="formData"></formGroup>             
            </el-row>            
        </div>
        <div class="second_block">
            <el-row>
                <tableShow
                    :key="updateKey"
                    ref="tableBar"
                    :isEdit="true"
                    :tableData="tableData"
                    :tableTitle="tableTitle"
                    :currentPage="currentPage"
                    :pageSet="pageSet"
                    @deleteData="deleteData"
                    @fetchData="fetchData"
                    @delTable="deleteData"
                ></tableShow>          
            </el-row>         
        </div>
    </div>
</template>

<script>
    import { deepCopy, mapToObj, array2arr } from '@/utils/util';
    import formGroup from './formGroup';
    import tableShow from './tableShow';
    export default {
        name: 'dataTypeIn',
        components: {
            formGroup,
            tableShow,
        }, 
        props: ["screenData"],        
        data() {
            return {
                formList:[],
                tableData: [],
                tableTitle: [],
                isEditData: true,
                pageSet: {
                    totalPages: 1, // 总页数
                    page_size: 10, // 每页条数
                },
                currentFormId: "",
                currentPage: 1,
                titlePropStr: "",
                titleProp: [],
                updateKey:1,
                currentScrollData:{}        
            }
        },
        created() {},
        methods: {
            // 添加数据源数据
            addData(data) {
                var para = {
                    formId: this.currentFormId, 
                    pageId: this.$route.name,
                    content: data,
                };
                this.$api.post(
                    '/tpsData/saveScreenSceneData',
                    para,
                    res => {
                        this.$message.success('添加成功');
                        this.fetchData();
                    },
                    err => {
                        this.$message.error('添加失败');
                    },
                    true
                );
            },
            // 删除数据
            deleteData(commitIds) {
                var para = {
                    commitIds: commitIds,
                    sceneidBigint: this.$route.query.sceneId,
                };
                this.$api.get(
                    '/cjScenepage/delScreenSceneData',
                    para,
                    res => {
                        this.$message.success('删除成功');
                        this.fetchData(this.currentPage);
                    },
                    err => {
                        this.$message.error('删除失败');
                    }
                );                
            },
            // 获取当前数据源数据
            fetchData(page) {
                page && (this.currentPage = page); // 切换页面时，保存当前页码
                page = page || this.currentPage; // 如果没有传页面，默认差当前页面
                page < 1 ? (page = 1) : null;
                // page  页码数
                // rows   每页条数
                this.$api.get(
                    '/cjScenepage/queryChartSceneData',
                    {
                        formId: this.currentFormId,
                        elements: this.titlePropStr,
                        page: page,
                        rows: this.pageSet.page_size,
                    },
                    res => {
                        var tableData = res.list || [];                        
                        // 如果数据为空，当前查询页数大于总页数 ，获取最后一页数据
                        if (
                            tableData.length === 0 &&
                            this.currentPage > res.totalCount
                        ) {
                            this.currentPage = res.totalCount;
                            this.fetchData(this.currentPage);
                            return;
                        }
                        var arr = deepCopy(this.titleProp);
                        arr.push('commitId');
                        this.tableData = array2arr(arr, tableData);
                        console.info(this.tableData);
                        this.pageSet.totalPages = res.totalCount;
                        this.currentScrollData.scrollData = tableData;
                        console.info(this.screenData);
                        this.updateKey++
                    },
                    fal => {}
                );
            },
            currentItem(item,type){                
                let childen = this.$refs.formData,reg = /,$/gi,flag=false;
                var titlePropStr = "";
                var titleProp = []; 
                var tableTitle = [];                
                // // console.info(item);
                if(type && type === 1){ //初始时
                    if(item.length===0 || item[0].fields === undefined)return 
                    this.currentFormId = item[0].id;
                    this.formList = item[0].fields;   
                    if(item[0].fields !== undefined && item[0].fields.length>0){                         
                        this.currentScrollData = item[0];
                        item[0].fields.forEach((elem, i) => {
                            // 表格表头数据
                            var obj = {};
                            obj.label = elem.name;
                            obj.prop = elem.id + '';
                            obj.inputType = elem.fieldOptions;
                            // obj.inputProps = elem.ctype;
                            titleProp.push(obj.prop);
                            tableTitle.push(obj);
                            titlePropStr += elem.id+',' 
                        })
                        flag=true;
                    }
                }else{ //切换数据时
                    console.info("切换数据时");
                    this.currentFormId = item.id;
                    this.formList = item.fields;  
                    this.currentPage = 1;
                    if(item.fields != undefined && item.fields.length>0){  
                        this.currentScrollData = item;                    
                        item.fields.forEach((elem, i) => {
                            // 表格表头数据
                            var obj = {};
                            obj.label = elem.name;
                            obj.prop = elem.id + '';
                            obj.inputType = elem.fieldOptions;
                            // obj.inputProps = elem.ctype;
                            titleProp.push(obj.prop);
                            tableTitle.push(obj);                            
                            titlePropStr += elem.id+',' 
                        })
                        flag=true;
                    }                                      
                }
                if(flag){
                    this.titlePropStr = titlePropStr.replace(reg,"");
                    this.tableTitle = Object.assign([], tableTitle);
                    this.titleProp = Object.assign([], titleProp)                                        
                    this.fetchData(); 
                }else{
                    this.titlePropStr = "表头";
                    this.titleProp = [];
                    this.tableTitle = [];
                    this.currentFormId = item.id;
                    this.fetchData(); 
                }  
                childen.handler(this.formList);             
            }
        }
    }
</script>

<style scoped lang="scss">
.dataManagement{
    margin: 0px ;
    padding:5px 15px;
    .el-row{
        margin:0px 0px 15px;
    }
    .el-form-item{
        margin-right: 30px;
    }
}
</style>